<template>
  <div class="rk-bg">
    <div class="rk-wrap">
      <img src="@/assets/images/rk_man.png" class="rk-man">
      <div class="rk-title">大学排名榜</div>
      <ul class="menu-list">
        <li v-for="(item, idx) in menuList" :key="idx" class="menu-border">
          <a href="javascript:;" class="menu-item" @click="gotoRankingDetail(idx)">
            {{item}}
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Api from '@/api/index.js'
import store from '@/store'
export default {
  name: 'rankingIndex',
  data() {
    return {
      menuList: [
        '院校网站详情',
        '邱均平本科院校排行榜',
        '软科本科院校排行榜',
        '武书连本科院校排行榜',
        '校友会本科院校排行榜',
        ' 独立学院排行榜',
        '民办院校排行榜',
        '高职高专院校排行榜',
        '学科专业排行榜',
        '软科学科排行'
      ]
    }
  },
  created() {
    this.getDefaultData()
  },
  methods: {
    // 跳转到详情页面
    gotoRankingDetail(idx) {
      this.$router.push({ name: 'rankingDetail', params: { 'id': idx + 1 } })
    },
    // 获取初始数据
    getDefaultData() {
      Api.getCollegesLevel().then(res => {
        if (res) {
          store.commit('SET_LEVEL', res)
        } else {
          console.log('获取院校级别失败')
        }
      })
      Api.getArea().then(res => {
        if (res) {
          store.commit('SET_DISTRICT', res)
        } else {
          console.log('获取全国地区失败')
        }
      })
      // Api.getDepartment().then(res => {
      //   if (res) {
      //     store.commit('SET_DEPARTMENT', res)
      //   } else {
      //     console.log('获取主管部门失败')
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/common/_vars.scss";
.rk-bg {
  min-height: 100%;
  background-color: $rk-bg;
  padding-top: 2.133333rem;
  padding-bottom: 0.666667rem;
  .rk-wrap {
    width: 90%;
    background-color: $white;
    border-radius: 0.106667rem;
    margin: 0 auto;
    position: relative;
    border: 0.053333rem dashed $rk-border;
    padding: 0.133333rem 0.8rem 0.533333rem 0.533333rem;
    .rk-man {
      position: absolute;
      width: 1.973333rem;
      height: 2.026667rem;
      top: -1.6rem;
      left: -0.213333rem;
    }
    .rk-title {
      text-align: center;
      font-size: 16px;
      font-stretch: normal;
      line-height: 1.12rem;
      color: #333;
    }
  }
  .menu-list {
    .menu-border {
      width: 100%;
      height: 1.28rem;
      border-radius: 0.106667rem;
      border: solid 1px $rk-btn-broder;
      position: relative;
      margin-top: 0.213333rem;
      margin-left: 0.213333rem;
      z-index: 1;
      margin-bottom: 0.8rem;
      &:last-child {
        margin-bottom: 0;
      }
      .menu-item {
        width: 100%;
        font-size: 16px;
        color: $white;
        height: 1.28rem;
        line-height: 1.28rem;
        text-align: center;
        background-color: $rk-btn-bg;
        border-radius: 0.106667rem;
        border: solid 1px $rk-btn-broder;
        position: absolute;
        left: -0.213333rem;
        top: -0.213333rem;
        z-index: 10;
      }
    }
  }
}
</style>
